<template>
        <el-card shadow="never" style="max-height: 70vh; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
                <el-form-item label="id:" prop="id" v-show="false">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="关联服务:" prop="fuwuId">
                    <SelectPage v-model="form.fuwuId" :url="'/admin/pz.fuwu/selectPage'" show_field="title" show_id="id" query_field="title" :multiple="false" />
                </el-form-item>

                <el-form-item label="推荐类型:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择推荐类型" clearable>
                        <el-option v-for="(item, index) in type" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="过期类型:" prop="expire_type">
                    <el-select v-model="form.expire_type" placeholder="请选择过期类型" clearable>
                        <el-option v-for="(item, index) in expire_type" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="开始时间:" prop="start_time" v-if="form.expire_type===1">-->
<!--                    <el-date-picker v-model="form.start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间" />-->
<!--                </el-form-item>-->
                <el-form-item label="到期时间:" prop="expire_time" v-if="form.expire_type===1">
                    <el-date-picker @change="onChangeExpireTime"
                        v-model="expireTime"  :picker-options="pickerOptions1"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
<!--                    <el-date-picker v-model="form.expire_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择到期时间" />-->
                </el-form-item>
                <el-form-item label="状态:" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态" clearable>
                        <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="置顶权重:" prop="weight">
                    <el-input-number v-model="form.weight" :step="1" :min="0"></el-input-number>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
import dayjs from 'dayjs'

export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                fuwuId: [{ required: true, message: "请输入关联服务", trigger: "blur" }],
                type: [{ required: true, message: "请输入推荐类型", trigger: "blur" }],
                expire_type: [{ required: true, message: "请输入过期类型", trigger: "blur" }],
                status: [{ required: true, message: "请输入状态", trigger: "blur" }],
                weight: [{ required: true, message: "请输入置顶权重", trigger: "blur" }],
            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            type:[
               { label: "首页推荐", value: 1 },
            ],
            expire_type:[
               { label: "有效期内", value: 1 },
               { label: "永久有效", value: 2 },
            ],
            status:[
               { label: "推广中", value: 1 },
               { label: "已过期", value: 2 },
            ],
            expireTime: [],
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            }
        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) !== '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                        this.expireTime = [
                            nval.start_time,
                            nval.expire_time
                        ]
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },
        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        onChangeExpireTime(e) {
            this.$set(this.form, 'start_time', dayjs(e[0]).format("YYYY-MM-DD HH:mm:ss"))
            this.$set(this.form, 'expire_time', dayjs(e[1]).format("YYYY-MM-DD HH:mm:ss"))
        }
    }
}
</script>
